<template>
  <div class="index-setting">
    <VsFormItem
      :label="$demoi18n('panel.label.mapSelect')"
      prop="projection"
    >
      <el-button
        :link="true"
        type="primary"
        size="default"
        icon="Tools"
        @click="openSetting"
      >
        {{ $demoi18n('word.choose') }}
      </el-button>
    </VsFormItem>
    <div v-if="settingVisiable">
      <el-dialog
        v-model="settingVisiable"
        :title="$demoi18n('panel.label.mapSelect')"
        width="800px"
        :close-on-click-modal="false"
        append-to-body
        destroy-on-close
        :class="`${customClass} ${visualThemeClassName} ${xvueNameSpace}`"
      >
        <div class="main">
          <el-tabs
            v-model="tileTabActiveName_"
            @tab-click="tabClick"
          >
            <el-tab-pane
              v-for="(item, index) in TileConfig"
              :key="item.key"
              :label="item.name"
              :name="item.key"
            >{{
              item.name
            }}</el-tab-pane>
          </el-tabs>
          <div class="map-list">
            <div
              v-for="(item, index) in mapList"
              :key="'item.url' + index"
              :class="`map-unit ${tabMapIndex_ === index ? 'on' : ''}`"
              @click="changeMap(index)"
            >
              <img
                :src="item.icon"
                alt=""
              />
              <el-tooltip
                :content="item.name"
                :effect="xvueTheme"
                placement="top"
              >
                <p :style="{ color: xvueTheme === 'dark' ? '#98cae6' : '#303133' }">{{ item.name }}</p>
              </el-tooltip>
            </div>
          </div>
        </div>
        <template #footer>
          <div>
            <el-button @click="settingVisiable = false">{{ $demoi18n('btn.cancel') }}</el-button>
            <el-button
              type="primary"
              @click="saveIndex"
            >{{ $demoi18n('btn.confirm') }}</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import TileConfig from './tile-config';

export default {
  name: 'IndexSetting',
  components: {},
  props: ['form', 'tileTabActiveName', 'tabMapIndex'],
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      customClass: 'tilelayer-select',
      settingVisiable: false,
      TileConfig,
      tabMapIndex_: 0,
      tileTabActiveName_: 'arcgis',
      xvueTheme: window._adoPremise.uc.theme || 'light',
    };
  },
  computed: {
    mapList() {
      return this.TileConfig.filter(child => child.key === this.tileTabActiveName_)[0].mapList || [];
    },
  },
  watch: {
    tileTabActiveName(val) {
      this.tileTabActiveName_ = val;
    },
    tabMapIndex(val) {
      this.tabMapIndex_ = val;
    },
  },
  created() {
    this.tileTabActiveName_ = this.tileTabActiveName;
    this.tabMapIndex_ = this.tabMapIndex;
  },
  methods: {
    changeMap(index) {
      this.tabMapIndex_ = index;
    },
    tabClick(tab) {
      this.tileTabActiveName_ = tab.props.name;
      this.tabMapIndex_ = 0;
    },
    openSetting() {
      this.settingVisiable = true;
    },
    saveIndex() {
      this.form.tileTabActiveName = this.tileTabActiveName_;
      this.form.tabMapIndex = this.tabMapIndex_;
      this.settingVisiable = false;
    },
  },
};
</script>
<style lang="less">
@import '@/common/color-picker-panel.less';
</style>
<style lang="less" scoped>
.index-setting {
}
:deep(.el-tabs__nav-wrap::after) {
  display: none;
}
:deep(.el-tabs__header) {
  margin-bottom: 10px;
}
:deep(.el-dialog__body) {
  padding: 10px 20px;
}
:deep(.el-tabs__content) {
  display: none;
}
.map-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .map-unit {
    width: 200px;
    margin-left: 3%;
    margin-bottom: 15px;
    &.on {
      img {
        width: 200px;
        height: 133px;
        border: 3px solid rgb(64, 158, 255);
      }
    }
    img {
      border: 3px solid transparent;
      width: 200px;
      height: 133px;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.25s;
    }
    p {
      margin: 0;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
